<template>
	<view>
		<view class="page-width">
			<app-search-for :value="value" placeholder="搜子品牌" isemit @tosearch="tosearch"></app-search-for>
		</view>
		<view class="" style="margin: 0 12rpx;" v-if="banners.length > 0">
			<app-swiper width="96" room effect3d effect3dNextMargin="242" :list="banners" mode="rect" name="icon_url"
				:itemStyle="itemStyle" :height="328" :autoplay="false" ref="bannereff" imgMode="scaleToFill">
			</app-swiper>
		</view>
		<view class="" v-if="navs.length > 0">
			<!-- 226-20 -->
			<app-navigation-icon navHeight="206" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="4" :imgStyle="imgstyle3" nextMargin="80rpx" :rows="2">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>
		<view class="movetop">
			<view class="index-navs" v-if="list.length > 0">
				<view class="app-index-navs dir-left-nowrap cross-center">
					<scroll-view scroll-x class="app-scroll" :scroll-into-view="'clasfy'+cureid" scroll-with-animation>
						<view class="cross-center">
							<view class="app-item" :id="'clasfy'+index" v-for="(item,index) in list" :key="item.id"
								:class="index == cureid ? 'active':''" @click="switc(index)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<scroll-view class="cate" @scroll="scroll" scroll-y="true" :scroll-into-view="'cate-'+cure"
				scroll-with-animation v-if="list.length > 0">
				<view v-for="(item,index) in list" :key="index" :id="'cate-'+index">
					<view class="cate-title">
						<text>{{item.name}}</text>
					</view>
					<view class="list-one" v-if="index % 2 == 0">
						<view class="list-one-item" v-for="(child,childindex) in item.subnav" :key="childindex"
							@click="jump(child.url)" v-if="childindex < 4">
							<image class="image" :src="child.icon_url" mode=""></image>
							<text class="u-line-2">{{child.name}}</text>
						</view>
					</view>
					<view class="list-two" v-else>
						<view class="list-two-item" v-for="(child,childindex) in item.subnav" :key="childindex"
							@click="jump(child.url)" v-if="childindex < 4">
							<image class="image" :src="child.icon_url" mode=""></image>
							<text class="list-two-title u-line-5">{{child.name}}</text>
						</view>
					</view>
					<view class="nowmoew" @click="morelist(item.id)" v-if="item.subnav.length>0">
						查看更多>>>
					</view>
					<view class="app-no-goods" v-else>
						<app-no-goods is_image="1" background="#fff"></app-no-goods>
					</view>
				</view>
				<view style="height: 36rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'

	let loadcom = false

	export default {
		data() {
			return {
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				itemStyle: "width:484rpx",
				imgstyle3: "width: 160rpx;height: 160rpx;",
				navs: [],
				banners: [],
				list: [],
				navsurl: '',
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				imgprefix: this.$siteInfo.imgroot,

				// 品类主播
				cure: 0,
				cureid: 0,
			}
		},
		onLoad(options) {
			this.navs = []
			this.banners = []
			this.list = []
			this.allReq(249) // 导航
			this.allReq(248) // banner
			this.navsReq(251)
			this.navsReq(247)
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				userInfo: state => state.user.info
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/subrand/index',
				params: {

				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/plugins/subrand/index',
				params: {

				}
			});
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.navs = []
			this.banners = []
			this.list = []
			this.allReq(249) // 导航
			this.allReq(248) // banner
			this.navsReq(251)
			this.navsReq(247)
		},
		components: {
			appSearchFor,
			appNavigationIcon,
			appSwiper
		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: '/pages/gospeed/search?zhilive=7'
				})
			},
			// 品类直播
			morelist(id) {
				let url = '/pages/gospeed/category?zhilve=7&snavs=2&cateid=' + id
				uni.navigateTo({
					url: url
				})
			},
			switc(index) {
				this.cure = index
				this.cureid = index
			},
			scroll(e) {
				let scrollTop = e.detail.scrollTop
				for (let i = 0; i < this.nav_list.length; i++) {
					if (this.nav_list[i].top <= scrollTop && scrollTop < this.nav_list[i].bottom) {
						this.cureid = i
					}
				}
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;' || item == '') {
					return
				}
				uni.navigateTo({
					url: item
				})
			},
			appStatus(id) {
				let self = this
				let status = 0
				self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				}).then(res => {
					if (res.data.review_status == 0) {
						self.status = 0
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					} else if (res.data.review_status == 1) {
						self.status = 1
						uni.redirectTo({
							url: '/pages/store/mine/mine'
						});
						return;
					} else if (res.data.review_status == 2) {
						self.status = 2
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					}
				}).catch(e => {

				})
			},
			allReq(pid) {
				let pdata = {
					pid: pid,
					status: 1,
					limit: 200
				}
				this.$request({
					url: this.$api.navs.list,
					data: pdata
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						if (pid == 249) {
							this.navs = res.data.list
						} else if (pid == 248) {
							this.banners = res.data.list
						}
					}
				}).catch(() => {

				})
			},
			navsReq(id) {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: id
					}
				}).then((res) => {
					if (id == 251) {
						let list = res.data.list
						for (let i in list) {
							this.list.push(list[i]);
						}
						this.calcSize();
					}
					if (res.code === 0) {
						if (id == 247) {
							this.navsurl = res.data.list[247].url
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			calcSize() {
				let top = 0
				let tem = 0
				let bottom = 0
				for (let i = 0; i < this.nav_list.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					view.boundingClientRect(res => {
						top = tem
						bottom = tem + res.height;
						this.nav_list[i].top = top
						this.nav_list[i].bottom = bottom
						tem = bottom
					}).exec();
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.climore {
		width: 726rpx;
		// margin: 0 auto 32rpx;
		// margin: 0 auto 24rpx;
		margin: 0 auto;
		// padding: 32rpx 12rpx 20rpx;
		padding: 12rpx;
		font-size: 26rpx;
		font-weight: bold;
		text-align: right;
		border-radius: 0 0 24rpx 24rpx;

		&.backcolor {
			background-color: #FFFFFF;
		}
	}

	// 左右显示
	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 470rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 360rpx;
			}
		}
	}

	// 联动
	.movetop {
		margin: 32rpx auto;
	}

	.cate {
		width: 100%;
		display: flex;
	}

	.cate-title {
		font-size: 32rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
		// color: #999;
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #446DFD;
	}

	.index-navs {
		width: #{750rpx};
		height: #{100rpx};
		padding: 24rpx 0;
		background: #fff;
	}

	.app-index-navs {
		height: #{80rpx};
		width: #{750rpx};

		.app-scroll {
			height: #{80rpx};
			white-space: nowrap;

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				text-align: center;
				color: #353535;
				padding: 0 #{20rpx};
				line-height: #{56rpx};
				position: relative;
				background-color: #e5e5e5;
				border-radius: 36rpx;
				margin-left: 36rpx;

				&.active {
					background-color: #d3ddfd;
					color: #446DFD;
				}
			}
		}
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
